<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="../../wx/css/iconfont.css" />
		<link rel="stylesheet" href="../../wx/css/style.css" />
		<link rel="stylesheet" href="../../wx/css/new.css" />	
		<style>
			ul {
				font-size: 14px;
				color: rgba(0,0,0,0);
				margin-top:-9.5rem;
			}
			.mui-btn {
				padding: 10px;
			}
			.mui-bar-nav~.mui-content.mui-pull-top-pocket{top:180px!important;}
		</style>
	</head>

	<body>
		<nav class="bottom">
			<div class="navbox">
				<a class=" mui-active" id="fjsj">
					<span class="iconfont icon-51"></span><br />
					<span class="mui-tab-label">附近商家</span>
				</a>
				<a class="right" id="hyzx">
					<span class="iconfont icon-gerenzhongxin"></span><br />
					<span class="mui-tab-label">个人中心</span>
				</a>
			</div>
		</nav>
		<div class="mui-content" id="content">
			<div class="fjsj_top">附近商家</div>
			<ul class="fjsj_list" id="list">
				<li v-for="item in items">
					<a :data-guid="item.id" href="shop_info.html">
					<div class="fjsj_img">
					<img :src="item.logo">
					</div>
					<div class="fjsj_infobox">
					<p class="dinw">{{item.juli}}m</p>
					<p class="nam">{{item.agent_name}}</p>
					<p class="weiz">
					<span class="iconfont icon-dingwei">{{item.address}}</span></p> 
					<p class="huod">最新活动：{{item.action}}</p>
					<p class="glj">鼓励金最高可抵：<em>{{item.ad_score}}%</em>
					</p></div></a>
				</li>
			</ul>
		</div>

		<script src="../../js/mui.js"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/m.js"></script>
		<script type="text/javascript">
			var page = 0; //最新新闻的id
			var longt;//获取到当前位置的经度 
			var lat;//获取到当前位置的纬度； 				
			
			mui('.navbox').on('tap', '#hyzx', function() {
				set.open("/plus/member/index");
			});
			mui.init({
		        pullRefresh: {
		            container: "#list", //下拉刷新容器标识
		            down: {
		            	style:"circle",
		                auto: false,
		                contentdown: "下拉可以刷新",
		                contentover: "释放立即刷新",
		                contentrefresh: "正在刷新...",
		                callback: pullDownFresh
		            },
		            up: {
						height:"10px",
		                auto: false,
		                range:'10px', //可选 默认100px,控件可下拉拖拽的范围
    					offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
		                callback: pullupFresh
		            }
		        }
    		});
			function pullDownFresh(){
				console.log(666);
				mui('#list').pullRefresh().endPulldownToRefresh();
			}
			function pullupFresh(){
				var data={ page: page+1, latitude: lat, longitude: longt };
				plus.nativeUI.showWaiting("加载中....",{padlock: true});//数据出来前显示等待加载框
				ajaxData(set.api_url+"Wx/index",data,function(res){
					plus.nativeUI.closeWaiting();
					mui('#list').pullRefresh().endPullupToRefresh(false)
					var list=res.list;
					if(list && list.length > 0) {
						page++;
						news.items = news.items.concat(list);
					}
				});
				 
			}
			mui.plusReady(function() {
				plus.nativeUI.showWaiting("加载中....",{padlock: true});//数据出来前显示等待加载框
				
				plus.geolocation.getCurrentPosition( geoInf, function ( e ) { 
				 
				},{geocode:true,provider:'amap'}); 
				 
				}); 
				
				 
				function geoInf( position ) { 				 
					var codns = position.coords;//获取地理坐标信息； 				 
					 longt = codns.longitude;//获取到当前位置的经度 
					 lat = codns.latitude;//获取到当前位置的纬度； 				
					//mui.alert(position.address.city+"=="+position.address.district+"--"+position.address.street);//城市、区、街道
					var data={ page: page+1, latitude: lat, longitude: longt };
					
					ajaxData(set.api_url+"Wx/index",data,function(res){
						plus.nativeUI.closeWaiting();
						var list=res.list;
						if(list && list.length > 0) {
							page++;
							news.items = news.items.concat(list);
						}
					});
				} 


			var news = new Vue({
				el: '#list',
				data: {
					banner: {}, //顶部banner数据
					items: [] //列表信息流数据
				}
			});

			//点击列表，打开详情
			//TODO 后续应该封装一个v-tap指令，实现tap监听
			mui('#list').on('tap', 'li>a', function() {
				var guid = this.getAttribute('data-guid');
				var href = this.getAttribute('href');
				var data={id:guid};
				pathopen(href,guid);	
				//open_view(href,"detail","商家详情","get_detail",data);
			});


			/**
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * 
			 * @param {Array} items 
			 */
			function convert(items) {
				var newItems = [];
				items.forEach(function(item) {
					newItems.push({
						logo: item.logo,
						juli: item.juli,
						agent_name: item.agent_name,
						address: item.address,
						action: item.action,
						ad_score: item.ad_score
					});
				});
				return newItems;
			}

			/**
			 * 格式化时间的辅助类，将一个时间转换成x小时前、y天前等
			 */
			var dateUtils = {
				UNITS: {
					'年': 31557600000,
					'月': 2629800000,
					'天': 86400000,
					'小时': 3600000,
					'分钟': 60000,
					'秒': 1000
				},
				humanize: function(milliseconds) {
					var humanize = '';
					mui.each(this.UNITS, function(unit, value) {
						if(milliseconds >= value) {
							humanize = Math.floor(milliseconds / value) + unit + '前';
							return false;
						}
						return true;
					});
					return humanize || '刚刚';
				},
				format: function(dateStr) {
					var date = this.parse(dateStr)
					var diff = Date.now() - date.getTime();
					if(diff < this.UNITS['天']) {
						return this.humanize(diff);
					}
					
					var _format = function(number) {
						return(number < 10 ? ('0' + number) : number);
					};
					return date.getFullYear() + '/' + _format(date.getMonth() + 1) + '/' + _format(date.getDay()) + '-' + _format(date.getHours()) + ':' + _format(date.getMinutes());
				},
				parse:function (str) {//将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
					var a = str.split(/[^0-9]/);
					return new Date (a[0],a[1]-1,a[2],a[3],a[4],a[5] );
				}
			};
		</script>
	
	</body>

</html>